<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  title?: string
  rightIcon?: string
  modelValue?: string
  showBack?: boolean
  tabs?: Array<{ label: string, value: string }>
}>(), {
  showBack: true,
})
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'leftClick'): void
  (e: 'rightClick'): void
}>()

const tabs = computed(() => {
  if (props.title) {
    return [{ label: props.title, value: '' }]
  }
  return props.tabs
})
</script>

<template>
  <view class="nav-bar">
    <view class="tab-header">
      <!-- 返回 -->
      <view v-if="showBack" class="back-btn" @click="emit('leftClick')">
        <uni-icons type="left" style="font-size: 34rpx;" color="#333" />
      </view>
      <view class="flex-center flex-1 tab-container">
        <view
          v-for="tab in tabs"
          :key="tab.value"
          class="tab-item"
          :class="{ active: modelValue === tab.value && tabs.length > 1 }"
          @click="emit('update:modelValue', tab.value)"
        >
          <text>{{ tab.label }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.nav-bar {
    height: 88rpx;
}
.tab-header {
  display: flex;
  background-color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  top: 0;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
  position: fixed;
  left: 0;
  right: 0;
  width:100%;

  .back-btn{
    height: 24rpx;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0 20rpx;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }

  .tab-container{
    gap: 15vw;
  }
  .tab-item {
    text-align: center;
    font-size: 28rpx;
    color: #333;
    position: relative;

    text{
        cursor: pointer;
    }

    &.active {
      color: $uni-color-primary;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: $uni-color-primary;
        border-radius: 2rpx;
      }
    }
  }
}
</style>
